<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="../css/main.css">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../css/element.css">
    <link rel="stylesheet" href="../css/product/shop_car.css">
    <title>结算</title>
</head>

<body>
    <div id="app" v-cloak>
<headers></headers>
        <!-- search -->
        <div class="search wrap">
            <logo></logo>
            <p class="shop_car_tit fl">结算</p>
            <!-- <div class="search_box fr">
                <input type="text" name="" id="" class="search_input" placeholder="电子天平">
                <div class="search_btn">
                    <img src="../images/search-2.png" alt="">
                </div>
                <div class="history_search">
                    <ul>
                        <li>电子天平1</li>
                        <li>电子天平2</li>
                        <li>电子天平3</li>
                        <li>电子天平4</li>
                        <li>电子天平5</li>
                        <li>电子天平6</li>
                    </ul>
                </div>
            </div> -->
        </div>

        <div class="wrap get_address">
            <div class="get_tit_box">
                <span class="fl get_tit">收货地址</span>
                <!-- <span class="fr new_address cursor" @click='new_add'>新增收货地址</span> -->
            </div>
            <div class="addtess_item cursor" :class='{active:active_index===index}' v-for='(item,index) in addressList' @click='choose_add(index,item.id)'>
                <span class="name">{{item.consigneeRealname}}</span>
                <span class="address">{{item.provinceName}} {{item.cityName}} {{item.districtName}} {{item.consigneeAddressAlias}}</span>
                <span class="num">{{item.consigneeMobilePhone}}</span>
            </div>
        </div>

        <div class="check_order wrap"  v-for='(item,index) in list'>
            <p class="check_tits">核对订单</p>
            <div>
                <div class="check_tit">
                    <ul>
                        <li class="check_four">商品</li>
                        <li class="check_two">规格</li>
                        <li class="check_two">单价</li>
                        <li class="check_two">数量</li>
                        <li class="check_two text_right padding_left">小计</li>
                    </ul>
                </div>
                <div class="check_shop">{{item.mercName}}</div>
                <div class="shop_item">
                    <div class="shop_detail padding_lr" v-for="(items,index) in item.cartGoods">
                        <div class="check_four fl">
                            <div class="detail_img fl">
                                <img :src="items.goodsImgs" alt="">
                            </div>
                            <p class="detail_name">{{items.goodsName}}</p>
                        </div>
                        <div class="check_two fl">
                            {{items.sku}}
                        </div>
                        <div class="check_two fl">
                            <p>￥{{items.goodsPrice}}</p>  
                        </div>
                        <div class="check_two fl">
                            {{items.goodsQuantity}}
                        </div>
                        <div class="check_two text_right fl">
                            <p class="product_money">￥{{items.goodsTotalPrice}}</p>
                            <p class="send_money">邮费：￥{{items.dispatchPrice}}</p>
                        </div>
                    </div>
                    <div class="remark_box">
                        <span class="fl">备注：</span>
                        <input type="text" class="fl remark" v-model='merOrders[index].remark' name="" id="">
                    </div>
                </div>
            </div>
            
        </div>

        <div class="discount_box wrap">
            <div class="discount_tit">
                优惠券
            </div>
            <div class="discount_ticket">
                <div class="clear_both" v-for='(item,index) in list'>
                    <div class="dicket_item fl" @click='choose_coupons(index,indexs,items)'  :class="{active:ticket_active===indexs}" v-for="(items,indexs) in item.coupons"  >
                        <div class="dicket_img">
                            <div class="disket_money">
                                <span class="disket_icon fl">¥</span>
                                <span class="disket_num fl">{{items.couponMoney}}</span>
                                <span class="can_use fl">满{{items.spendMoney}}可用</span>
                            </div>
                            <p class="ticket_data">{{items.validStartTime = items.validStartTime.substring(0, 10)}}－{{items.validEndTime = items.validEndTime.substring(0, 10)}}</p>
                        </div>
                        <div class="dicket_shop">
                            {{items.couponName}}
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="order_detail wrap">
            <div class="order_info_item">
                <div class="order_into_ans fr">
                    ￥{{mercGoodsPrice}}
                </div>
                <div class="order_into_tit fr">
                    共<span>{{goods_num}}</span>件商品,商品总额：
                </div>
            </div>
            <div class="order_info_item">
                <div class="order_into_ans fr">
                    -￥{{totalNum}}
                </div>
                <div class="order_into_tit fr">
                    优惠：
                </div>
            </div>
            <div class="order_info_item">
                <div class="order_into_ans fr">
                    ￥{{all_dispatchPrice}}
                </div>
                <div class="order_into_tit fr">
                    运费：
                </div>
            </div>
            <div class="order_info_item">
                <div class="pay_all_money fr">
                    ￥{{show_all_price}}
                </div>
                <div class="order_into_tit fr">
                    应付总额：
                </div>
            </div>
            <!-- <div class="add_person">寄送至：{{addressList[active_index].provinceName}} {{addressList[active_index].districtName}} {{addressList[active_index].cityName}} {{addressList[active_index].consigneeRealname}}</div> -->
            <!-- <div class="add_person">收货人：{{addressList[active_index].consigneeRealname}}    {{addressList[active_index].consigneePhone}}</div> -->
        </div>
        <div class="wrap clear_both">
            <div class="shop_submit_btn cursor fr" @click='submit_order()'>
                提交订单
            </div>
        </div>
      

        
        <div id="form_sumbit" style="display: none"></div>
        

       <div class="wrap clear_both">             <productfooter></productfooter>         </div>
    </div>
 

    <script src="../js/browser.min.js"></script>
    <script src="../js/vue.js"></script>
    <script src="../js/element.js"></script>
    <script src="../js/axios.js"></script>         <script src="../js/qs.js"></script>
    <script src="../js/main.js"></script>
    <script type="text/babel">
        var app = new Vue({
            el: '#app',
            data() {
                return {
                    books:20,
                    checked1:false,
                    nums: 1,
                    product_num:3,
                    shop:2,
                    add_popup:false,
                    input10:'',
                    input11:'',
                    input12:'',
                    shopCartId:'',
                    addressList:'',
                    list:'',
                    mercGoodsPrice:0,
                    all_price:0,
                    goods_num:0,
                    all_dispatchPrice:0,
                    active_index:'',
                    addressId:'',
                    merOrders:[],
                    this_index:0,
                    totalNum:0,
                    payform:'',
                    ticket_active:'',
                    show_all_price:''
                };
            },
            components: {

            },
            mounted() {
                this.shopCartId = this.GetQueryString().id
                this.scsp()
            },
            methods: {
                // // 选择优惠券
                choose_coupons(index,indexs,items){
                    console.log(items)
                },
                

                // 提交订单
                submit_order(){
                    axios({
                        method:"POST",
                        url:base_url + "/uo/sO",
                        data:{
                            addressId:this.addressId,
                            merOrders:this.merOrders
                        },
                        headers:{
                            'loginType':0,
                            'Content-Type':'application/JSON',
                            "TOKEN":localStorage.getItem('wACCESS_TOKEN')
                        }
                    })
                    .then(function (res) {
                        if (res.data.code==1) {
                            let payInfo=res.data.data.result.split('<script>')[0]
                            document.getElementById('form_sumbit').innerHTML=payInfo
                            setTimeout(() => {
                                document.forms[0].submit();
                            }, 100);
                        }else{
                            app.$message.error(res.data.msg)
                        }
                        
                    })
                    .catch(function (error) {
                    });
                },
                // 选择地址
                choose_add(index,id){
                    this.addressId = id
                    axios({
                        method:"POST",
                        url:base_url + "/sc/uascsp",
                        data:Qs.stringify({
                            shopCartId:this.shopCartId,
                            addressId:id
                        }),
                        headers:{
                            'Content-Type':'application/x-www-form-urlencoded',
                            "TOKEN":localStorage.getItem('wACCESS_TOKEN')
                        }
                    })
                    .then(function (res) {
                        app.active_index = index
                        app.addressId = id
                        // app.addressList = res.data.data.addressList
                        app.list = res.data.data.list
                        app.addressId = id
                        // app.mercGoodsPrice = 0
                        app.all_price = 0
                        app.all_dispatchPrice = 0
                        // app.goods_num = 0
                        // for (let i = 0; i < res.data.data.list.length; i++) {
                        //     app.mercGoodsPrice += Number(res.data.data.list[i].mercGoodsPrice)
                        // }
                        for (let i = 0; i < res.data.data.list.length; i++) {
                            for (let j = 0; j < res.data.data.list[i].cartGoods.length; j++) {
                                app.all_price += Number(res.data.data.list[i].cartGoods[j].goodsTotalPrice)
                            }
                            app.all_price +=Number(res.data.data.list[i].mercDispatchPrice)
                            app.show_all_price  =  Number(app.all_price)-Number(app.totalNum).toFixed(2)
                        }
                        for (let i = 0; i < res.data.data.list.length; i++) {
                            app.all_dispatchPrice += Number(res.data.data.list[i].mercDispatchPrice)
                        }
                        
                        // for (let i = 0; i < res.data.data.list.length; i++) {
                        //     for (let j = 0; j < res.data.data.list[i].cartGoods.length; j++) {
                        //         app.goods_num += res.data.data.list[i].cartGoods[j].goodsQuantity
                        //     }
                        // }
                    })
                    .catch(function (error) {
                    });
                },
                
                scsp() {
                    axios({
                        method:"POST",
                        url:base_url + "/sc/scsp",
                        data:Qs.stringify({
                            shopCartId:this.shopCartId
                            // addressId:this.addressId
                        }),
                        headers:{
                            'Content-Type':'application/x-www-form-urlencoded',
                            "TOKEN":localStorage.getItem('wACCESS_TOKEN')
                        }
                    })
                    .then(function (res) {
                        app.addressList = res.data.data.addressList
                        app.list = res.data.data.list
                        // app.addressId = res.data.data.addressList[0].id
                        var id_list = ''
                        for (let i = 0; i < res.data.data.list.length; i++) {
                            for (let j = 0; j < res.data.data.list[i].cartGoods.length; j++) {
                                id_list += res.data.data.list[i].cartGoods[j].id+','
                            }
                            id_list = id_list.substring(0, id_list.lastIndexOf(','));
                            app.merOrders.push({
                                couponId:'',
                                list:id_list.split(','),
                                mercId:res.data.data.list[i].mercId,
                                remark:''
                            },)  
                        }
                        
                        for (let i = 0; i < res.data.data.list.length; i++) {
                            app.mercGoodsPrice += Number(res.data.data.list[i].mercGoodsPrice)
                        }
                        for (let i = 0; i < res.data.data.list.length; i++) {
                            app.all_price += Number(res.data.data.list[i].mercTotalPrice)
                        }
                        for (let i = 0; i < res.data.data.list.length; i++) {
                            app.all_dispatchPrice += Number(res.data.data.list[i].mercDispatchPrice)
                        }
                        app.show_all_price = app.all_price
                        
                        for (let i = 0; i < res.data.data.list.length; i++) {
                            for (let j = 0; j < res.data.data.list[i].cartGoods.length; j++) {
                                app.goods_num += res.data.data.list[i].cartGoods[j].goodsQuantity
                            }
                        }
                        for (let i = 0; i < app.list.length; i++) {
                            for (let j = 0; j < app.list[i].coupons.length; j++) {
                                if (parseInt(app.list[i].coupons[j].spendMoney) < parseInt(app.all_price)) {
                                    if (parseInt(app.totalNum)<parseInt(app.list[i].coupons[j].couponMoney)) {
                                        app.totalNum = app.list[i].coupons[j].couponMoney
                                        app.merOrders[i].couponId = app.list[i].coupons[j].id
                                        app.ticket_active = j
                                        app.show_all_price = (app.all_price - app.totalNum).toFixed(2)
                                    }
                                }
                            }
                            return
                        }
                        console.log(res.data.data)

                        
                    })
                    .catch(function (error) {
                    });
                },
                new_add(){
                    this.add_popup = true
                },
                close_x(){
                    this.add_popup =false
                },
                GetQueryString() {
                    var obj = new Object()
                    var scan_url = window.location.href.split('?')[1];
                    var strs = scan_url.split('&');
                    for(var x in strs) {
                        var arr = strs[x].split('=');
                        obj[arr[0]] = arr[1]
                    }
                    return obj
                },
            }
        })
    </script>
</body>

</html>